import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import { HeartFilled } from '@ant-design/icons'
import { UserService } from '../../../transfer/service/UserService'

interface ILikeBtnProps {
    width: string
    height: string
    imgId: string
    expend?: boolean
}

export function LikeOutLineBtn(props: ILikeBtnProps) {
    const [outLineExpend, setOutLineExpend] = useState(false)

    const handleLikeBtn = () => {
        outLineExpend
            ? new UserService().postLike(JSON.parse(localStorage.getItem('account') as any).id, {
                  pictureId: props.imgId
              })
            : new UserService().deleteLikes(JSON.parse(localStorage.getItem('account') as any).id, props.imgId)
    }

    return (
        <div
            className={`${style.out__line} ${outLineExpend ? 'active' : ''}`}
            onClick={() => {
                setOutLineExpend(!outLineExpend)
                handleLikeBtn()
            }}
            style={{
                ['--width' as any]: props.width,
                ['--height' as any]: props.height
            }}>
            <HeartFilled />
        </div>
    )
}

export default function LikeBtn(props: ILikeBtnProps) {
    const [expend, setExpend] = useState(false)

    const handleLikeBtn = () => {
        expend
            ? new UserService().postLike(JSON.parse(localStorage.getItem('account') as any).id, {
                  pictureId: props.imgId
              })
            : new UserService().deleteLikes(JSON.parse(localStorage.getItem('account') as any).id, props.imgId)
    }
    return (
        <div
            className={`${style.container} ${expend ? 'active' : ''}`}
            onClick={() => {
                setExpend(!expend)
                handleLikeBtn()
            }}
            style={{
                ['--width' as any]: props.width,
                ['--height' as any]: props.height
            }}>
            <HeartFilled />
        </div>
    )
}
